<template>
  <IFormSelect
    :id="inputId"
    :model-value="modelValue"
    @change="handleChange($event)"
  >
    <option v-for="format in formats" :key="format" :value="format">
      {{ format }} [<span v-text="localizedTime(new Date(), format)" />]
    </option>
  </IFormSelect>
</template>

<script setup>
import { onMounted } from 'vue'

import { useApp } from '../composables/useApp'
import { useDates } from '../composables/useDates'

const props = defineProps({
  modelValue: String,
  inputId: { type: String, default: 'time_format' },
})

const emit = defineEmits(['update:modelValue'])

const { scriptConfig } = useApp()
const { localizedTime } = useDates()

const formats = scriptConfig('time_formats')

function handleChange(value) {
  emit('update:modelValue', value)
}

onMounted(() => handleChange(props.modelValue))
</script>
